<!-- 回购 -->
<template>

	<view class="repurchase" :style="colorStyle">
		<!-- <view class="back-bg">
			<image :src="imgUrl + 'bgImgs.png'" mode="aspectFill"></image>
		</view>
		
		<view class="homeIcon" @click="buybackGuide(8)">
			<image :src="imgUrl + 'homeIcon.png'" mode="aspectFill"></image>
		</view> -->
		
		<view class="content">
			
			<view class="tabel-box">
				<view class="title_box">
					<text v-if="buybackType==1">黄金</text>
					<text v-else-if="buybackType==2">白银</text>
					<text v-else-if="buybackType==3">铂金</text>
					<text v-else>钯金</text>
					回收金价
				</view>
				<!-- <view class="tabel-head">
					<view class="tabel-head-list">
						<view class="tabel-head-list-text"
							:class="[buybackType == index?'tabel-head-list-text-active':'']"
							v-for="(item,index) in goldList" :key="index" @click="handleClick(item)">
							{{ item.metal_type_name_cn }}
						</view>
					</view>
					<view class="tabel-head-bg">
						<image :src="imgUrls + 'tabel001.png'" mode="aspectFill" v-if="buybackType == 1"></image>
						<image :src="imgUrls + 'tabel002.png'" mode="aspectFill" v-else-if="buybackType == 2">
						</image>
						<image :src="imgUrls + 'tabel003.png'" mode="aspectFill" v-else-if="buybackType == 3">
						</image>
						<image :src="imgUrls + 'tabel004.png'" mode="aspectFill" v-else></image>
					</view>
				</view> -->
				<view class="tabel-info">
					<view class="tabel-info-money">
						{{ Number(goldList[buybackType-1].bidprice).toFixed(goldList[buybackType-1].metal_type_name_cn=='白银'?3:2) }}<text>元/克</text>
					</view>
					<view class="tabel-info-tips">
						金价参照上海黄金交易所 该金价仅供参考
					</view>
					
					<view class="table-form-weight">
						<view class="form-info-left">
							交易克重
						</view>
						<view class="form-info-right">
							<view class="form-info-right-input">
								<input type="digit" v-model="weightNum" placeholder="请输入克重" />
							</view>
						</view>
					</view>
					<view class="weight_tip">回购克重需要{{ weightRange.min }}克起，限{{ weightRange.max }}克以下</view>
					<view class="form-type-box">
						<view class="form-type-info" @click="changeTransactionType(1)">
							<!-- <view class="form-type-icon">
								<image :src="imgUrls + 'icons01.png'" mode="aspectFill" v-if="transactionType == 1">
								</image>
								<image :src="imgUrls + 'icons02.png'" mode="aspectFill" v-else></image>
							</view> -->
							<view class="form-type-text" v-if="transactionType == 1" :class="{'form-type-text-a': transactionType == 1}">
								现价回收
							</view>
							<view class="form-type-text" v-else :class="{'form-type-text-a': transactionType == 1}">
								现价回收
							</view>
						</view>
					
						<view class="form-type-info" @click="changeTransactionType(2)" v-if="buybackType == 1">
							<!-- <view class="form-type-icon">
								<image :src="imgUrls + 'icons01.png'" mode="aspectFill" v-if="transactionType == 2">
								</image>
								<image :src="imgUrls + 'icons02.png'" mode="aspectFill" v-else></image>
							</view> -->
							<view class="form-type-text" v-if="transactionType == 2" :class="{'form-type-text-a': transactionType == 2}">
								来料待结
							</view>
							<view class="form-type-text" v-else :class="{'form-type-text-a': transactionType == 2}" >
								来料待结
							</view>
						</view>
					</view>
				</view>
				<view class="form-box">
					<view class="form-info" style="align-items: end;display: block;">
						<view class="form-info-left" @click="onAddress">
							寄件地址
							<view class="form-info-right" style="align-items: end;display: inline-block;text-align: right;float: right;" >
								<view class="form-info-right-address">
									<!-- {{ addressName || '选择寄件地址' }} -->
								</view>
								<view class="iconfont icon-xiangyou" style="color: #7d5500; font-size: 30rpx;margin: 6rpx 0 0 16rpx;"></view>
							</view>
						</view>
						
						<!-- <image :src="imgUrl + 'homeIcon.png'" mode="aspectFill"></image> -->
						<view class="form-info-address-text">
							<view class="form-info-address-text-title">{{address_nickname}} {{address_phone}}</view>
							<view class="form-info-address-text-info">{{ addressName }}</view>
						</view>
						
					</view>
					
					<view class="form-info">
						<view class="form-info-left">
							快递保险
						</view>
						<view class="form-info-right">
							<view class="form-info-right-text" style="margin-right: 64rpx;">
								<view>+{{ confirmOrderDetail.premium_price }}</view>
							</view>
							<view class="form-info-right-btn">
								<!-- <switch color="#10C759" :checked="insurance" @change="insuranceChange" style="transform:scale(0.7)" /> -->
								<switch :checked="insurance" @change="insuranceChange" color="#10c759"
									style="transform:scale(0.6)" />
							</view>
						</view>
					</view>
					
					<view class="form-info">
						<view class="form-info-left">
							定金
						</view>
						<view class="form-info-right" style="flex: 1;justify-content: flex-end;">
							<view class="form-info-right-money">
								{{ totalPrice }}
							</view>
							<text class="tip_box">
								收到货当天定金将原路退回
							</text>
						</view>
					</view>
				</view>
				
			</view>
			
		
			


			<view class="tips">
				<view class="tips-text">
					<rich-text :nodes="richData"></rich-text>
				</view>
			</view>
		</view>


		<view class="base-box">
			<view class="base-title-price" >
				定金: <view style="color:red;display: contents;font-size: 32rpx;">￥{{totalPrice}}</view>
			</view>
			<view class="base-btn" @click="handleSubmit">
				确认下单
			</view>
		</view>



		<!-- 弹窗 -->
		<uni-popup ref="popup" :mask-click="false" :safeArea="false">
			<view class="popContent">
				<view class="closeBox" @click="close">x</view>
				<template v-if="!isSubmit">
					<!-- <view class="popTop">
						<view class="title">在线回收</view>
						<view class="stepList">
							<view class="stepItem" :class="{'active':stepIndex == idx}" v-for="(sa,idx) in stepArr"
								:key="idx">
								<view class="stepIdx">{{idx+1}}</view>
								<view class="stepName" :class="{'stepNameActive':stepIndex == idx}">{{sa}}</view>
								<template v-if="stepArr.length > 3">
									<view class="arrowBox" :class="{'arrowActive':stepIndex == idx}" v-if="idx != 3">
										<view class="arrowBg flex_c">
											<view class="triangle"></view>
										</view>
									</view>
								</template>
								<template v-else>
									<view class="arrowBox" :class="{'arrowActive':stepIndex == idx}"
										v-if="idx != 3 && idx != 2">
										<view class="arrowBg flex_c">
											<view class="triangle"></view>
										</view>
									</view>
								</template>
							</view>
						</view>
					</view> -->

					<view class="headTips">{{headTxt}}</view>

					<!-- <template v-if="stepIndex == 0">
						<view class="radioTypeBox" @click="changeTransactionType(1)"
							:class="{'radioTypeActive': transactionType == 1}">
							<view class="radioTitle">定价回收</view>
							<view class="radioTtxt">您可以和我们约定一个回购价格，当我们收到您的商品后无论金价涨跌，我们会按约定的价格与您结算！</view>

							<view class="radioBox">
								{{transactionType == 1 ? '✓' : ''}}
							</view>
						</view>
						<view v-if="buybackType==1" class="radioTypeBox" @click="changeTransactionType(2)"
							:class="{'radioTypeActive':transactionType == 2}">
							<view class="radioTitle">来料待结</view>
							<view class="radioTtxt">当我们收到您的商品后进行检测入库，您可以随时在金料库中按实时价格卖出或者提货、换货等业务！</view>
							<view class="radioBox">
								{{transactionType == 2 ? '✓' : ''}}
							</view>
						</view>
					</template> -->

					<!-- <template v-if="stepIndex == 1">
						<view class="processItem" style="padding: 43rpx 36rpx;">
							<input type="digit" v-model="weightNum" class="inputBox" placeholder="请输入克重" />
							<view class="dangerTxt">
								回购克重需要{{ weightRange.min }}克起，限{{ weightRange.max }}克以下
							</view>
						</view>
					</template> -->

					<!-- <template v-if="stepIndex == 2">
						<view class="processItem flex_sb" style="margin-bottom: 16rpx;" @click="onAddress">
							<view class="name">寄件地址</view>
							<view class="flex_j">
								<text class="addressTxt line1" v-if="addressName">{{addressName}}</text>
								<view class='iconfont icon-dingwei2' v-else style="color: #C4C4C4;"></view>
								<view class='iconfont icon-xiangyou'></view>
							</view>
						</view>

						<view class="processItem flex_sb">
							<view class="name">快递保险 <image src="@/static/imgs/wenhao.png" @click="baoxianTips"
									class="wenhao-icon"></image>
							</view>
							<view class="flex_sb" style="width: auto;">
								<view>+{{ confirmOrderDetail.premium_price }}</view>
								<switch color="#10C759" :checked="insurance" @change="insuranceChange"
									style="transform:scale(0.7)" />
							</view>
						</view>
					</template> -->

					<template>
						<view class="tagTxt" v-if="transactionType == 1">需要支付定金</view>
						<view class="tagTxt" v-if="transactionType == 2">需要支付快递保险</view>
						<view class="moneyNum">{{ totalPrice }}</view>
						<view class="dangerRed" v-if="transactionType == 1">收到货当天定金将原路退回</view>
						<view class="processItem" style="padding: 43rpx 36rpx;">
							<!-- <view class="payBox flex_sb bdrder_bm">
								<view class="payLeft flex_j">
									<image src="@/static/imgs/pay0.png" class="payImg"></image>
									<view class="payInfo">
										<view class="typeName">余额支付</view>
										<view class="payTxt">
											<text style="margin-right: 10rpx;">当前余额{{ userInfo.now_money }} </text>
											<block v-if="Number(userInfo.now_money) < confirmOrderDetail.deposit">
												余额不足，<text class="dangerTxt"
													@click="$util.JumpPath('/pages/new_page/user/recharge')">请充值</text>
											</block>
										</view>
									</view>
								</view>
								<view class="payRadioBox" :class="{'payRadioActive': payIndex == 3}"
									@click="payIndex = 3">
									{{payIndex == 3 ? '✓' : ''}}
								</view>
							</view> -->
							<!-- #ifdef MP-WEIXIN -->
							<view class="payBox flex_sb">
								<view class="payLeft flex_j">
									<image src="@/static/imgs/pay1.png" class="payImg"></image>
									<view class="payInfo">
										<view class="typeName">微信支付</view>
										<view class="payTxt">快捷支付</view>
									</view>
								</view>
								<view class="payRadioBox" :class="{'payRadioActive': payIndex == 1}"
									@click="payIndex = 1">
									{{payIndex == 1 ? '✓' : ''}}
								</view>
							</view>
							<!-- #endif -->

							<!-- #ifdef MP-ALIPAY -->
							<view class="payBox flex_sb">
								<view class="payLeft flex_j">
									<image src="@/static/imgs/pay01.png" class="payImg"></image>
									<view class="payInfo">
										<view class="typeName">支付宝支付</view>
										<view class="payTxt">快捷支付</view>
									</view>
								</view>
								<view class="payRadioBox" :class="{'payRadioActive': payIndex == 2}"
									@click="payIndex = 2">
									{{payIndex == 2 ? '✓' : ''}}
								</view>
							</view>
							<!-- #endif -->
						</view>
					</template>

					<view class="floorBox flex_c">
						<!-- <view class="upBtn" v-if="stepIndex != 0" @click="stepChange('up')">上一步</view> -->
						<!-- <view class="downBtn" @click="stepChange('down')">
							{{stepIndex + 1 == stepArr.length ? '提交订单' : '下一步'}}
						</view> -->
						<view class="downBtn" @click="stepChange('down')">
							确认支付
						</view>
					</view>
				</template>


				<template v-else>
					<view class="headTips">确认订单</view>
					<view class="goldTxt" v-show="transactionType == 1">
						{{ confirmOrderDetail.type }}回收价 <text
							class="goldTxtFw">{{ Number(confirmOrderDetail.bidprice)>0?Number(confirmOrderDetail.bidprice).toFixed(confirmOrderDetail.type=='白银'?3:2):0 }}</text>
						元/克
					</view>
					<view class="confirmMain">
						<view class="confirmMainHead flex_sb bdrder_bm">
							<view class="fw_550">
								{{ confirmOrderDetail.type }}旧料 <text
									class="ml_28">{{ confirmOrderDetail.weight }}g</text>
							</view>
							<view v-show="transactionType == 1">
								<view class="redTxt">
									{{ Number(confirmOrderDetail.predict_price)>0?Number(confirmOrderDetail.predict_price).toFixed(2):0 }}
								</view>
								<view class="confirmGrey">预估金额</view>
							</view>
						</view>

						<view class="confirmItem" v-show="confirmOrderDetail.add_time">
							下单时间 <text class="confirmGrey ml_28">{{ confirmOrderDetail.add_time }}</text>
						</view>
						<view class="confirmItem">
							回收品类 <text class="confirmGrey ml_28">{{ confirmOrderDetail.type }}</text>
						</view>
						<view class="confirmItem">
							交易方式 <text class="confirmGrey ml_28">{{ confirmOrderDetail.order_type }}</text>
						</view>
						<block v-if="transactionType == 1">
							<view class="confirmItem">
								回收金价 <text
									class="confirmGrey ml_28">{{ Number(confirmOrderDetail.bidprice)>0?Number(confirmOrderDetail.bidprice).toFixed(confirmOrderDetail.type=='白银'?3:2):0 }}元*{{ confirmOrderDetail.weight }}克</text>
							</view>
							<view class="confirmItem">
								预估价格 <text
									class="confirmGrey ml_28">{{ Number(confirmOrderDetail.predict_price)>0?Number(confirmOrderDetail.predict_price).toFixed(2):0 }}元</text>
							</view>
							<view class="confirmItem">
								预付定金 <text
									class="confirmGrey ml_28">{{ Number(confirmOrderDetail.deposit)>0?Number(confirmOrderDetail.deposit).toFixed(2):0 }}元</text>
							</view>
						</block>
						<view class="confirmItem" v-if="insurance">
							快递保险 <text
								class="confirmGrey ml_28">{{ Number(confirmOrderDetail.premium_price) > 0?Number(confirmOrderDetail.premium_price).toFixed(2):0 }}元</text>
						</view>
					</view>

					<view class="floorBox">
						<view class="flex_c termsTxt">
							<view class="fl_radio" :class="{'fl_radioActive' : isTerms}" @click="isTerms = !isTerms">
								{{isTerms ? '✓' : ''}}
							</view>
							已阅读并同意 <text class="termsRed" @click="buybackGuide(5)">《回购协议》</text>
						</view>
						<view class="downBtn" @click="submitBtn">确认订单</view>
					</view>
				</template>

			</view>

		</uni-popup>

		<addressWindow ref="addressWindow" @changeTextareaStatus="changeTextareaStatus" :news='news' :address='address'
			:pagesUrl="pagesUrl" @OnChangeAddress="OnChangeAddress" @changeClose="changeClose"
			@OnDefaultAddress="OnDefaultAddress" @onHaveAddressList="onHaveAddressList"></addressWindow>

		<!-- <pageFooter></pageFooter> -->
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getAddressList
	} from '@/api/user.js';
	import couponListWindow from '@/components/couponListWindow';
	import addressWindow from '@/components/addressWindow';
	import pageFooter from '@/components/pageFooter/index.vue'
	import {
		homepage_gold,
		get_buyback_express_insurance,
		buyback_create_order,
		wechat_pay,
		buyback_cancel_order,
		balance_pay,
		buy_back_switch,
		article_details,
		buy_back_weight_range
	} from '@/api/new_api.js';
	import {
		getOpenAdv
	} from '@/api/api.js';
	import {
		getShare,
		getVersion
	} from "@/api/public.js";
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		timeFormat
	} from '@/utils/util.js'
	import {
		USER_INFO
	} from '@/config/cache.js'
	import {
		HTTP_REQUEST_URL,
		HTTP_REQUEST_IMG_URL
	} from '@/config/app.js'
	const typeMap = {
		'黄金': 1,
		'白银': 2,
		'铂金': 3,
		'钯金': 4,
	}
	const typeArr = ['', '黄金', '白银', '铂金', '钯金']
	import colors from '@/mixins/color';
	export default {
		mixins: [colors],
		components: {
			addressWindow,
			pageFooter
		},
		data() {
			return {
				HTTP_REQUEST_URL,
				imgUrls: HTTP_REQUEST_IMG_URL,
				stepArr: ['业务方式', '来料克重', '寄件地址', '付定方式'],
				stepIndex: 3,
				transactionType: 1,
				buybackType: 1,
				payIndex: 1,//1微信支付，3余额支付
				isSubmit: false,
				headTxt: '您要和我们交易的方式？',
				weightNum: '', // 克重
				isTerms: true, // 条款

				coupon: {
					coupon: false,
					list: [],
					statusTile: this.$t(`立即使用`)
				}, //优惠券组件
				news: 0,
				address: {
					address: false
				}, //地址组件
				pagesUrl: "",
				pinkId: '',
				addressId: '',
				textareaStatus: false,
				couponTitle: '',
				couponId: '',
				haveAddressList: false,
				addressName: '', // 地址
				address_phone:'',// 手机号
				address_nickname:'',// 姓名

				defaultData: {
					startTime: '',
					endTime: ''
				},
				minDate: {
					year: 2024,
					month: 11,
					date: 5
				},
				maxDate: {
					year: 2099,
					month: 12,
					date: 31
				},

				insurance: false,
				updateTime: '',
				goldList: [{
						metal_type_name_cn: '黄金',
						bidprice: '0.00',
						buyback_state: 0
					},
					{
						metal_type_name_cn: '白银',
						bidprice: '0.00',
						buyback_state: 0
					},
					{
						metal_type_name_cn: '铂金',
						bidprice: '0.00',
						buyback_state: 0
					},
					{
						metal_type_name_cn: '钯金',
						bidprice: '0.00',
						buyback_state: 0
					},
				],
				userInfo: {},
				confirmOrderDetail: {
					deposit: 0, // 定金
					premium_price: 0, //保险费
					order_type: '现价回收'
				},
				advData: {},
				timecount: undefined,
				times: 0,
				richData: '',
				buyBackWeightRange: {},
				shareInfo: {},

				navigatorHeight: 40,
				statusBarHeight: 12,
				totalHeight: 40,
			}
		},
		watch:{
			weightNum:function(n,o){
				this.confirmOrderDetail.weight=n
			}
		},
		onLoad(options) {
			
			// this.article_details()
			this.buy_back_weight_range()
			
			this.setOpenShare()
			if(options.buybackType){
				this.buybackType = options.buybackType
			}
			// #ifdef MP
			//获取系统信息
			uni.getSystemInfo({
				success: res => {
					this.system = res
				}
			})
			//获取胶囊信息
			this.menu = uni.getMenuButtonBoundingClientRect()
			//计算组件高度
			this.statusBarHeight = this.system.statusBarHeight //状态栏高度
			this.menuHeight = this.menu.height //胶囊高度
			this.menuTop = this.menu.top //胶囊与顶部的距离
			//导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度
			this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height
			//总高度 = 状态栏的高度 + 导航栏高度    
			this.totalHeight = this.statusBarHeight + this.navigatorHeight;
			// #endif
		},
		onShow() {
			this.homepage_goldHandle()
			
			this.get_buyback_express_insurance()
			if (this.$store.getters.isLogin) {
				this.getUserInfo();
			}
		},
		onHide() {
			this.clearTimer()
		},
		onUnload() {
			this.clearTimer()
		},
		computed: {
			totalPrice() {
				if (this.insurance) {
					if (this.transactionType == 1) {
						return (this.confirmOrderDetail.deposit * 100 + this.confirmOrderDetail.premium_price * 100) / 100
					} else {
						return this.confirmOrderDetail.premium_price.toFixed(2)
					}
				} else {
					if (this.transactionType == 1) {
						return this.confirmOrderDetail.deposit
					} else {
						return '0.00'
						// return this.confirmOrderDetail.premium_price.toFixed(2)
					}
				}
				return '0.00'
			},
			weightRange() {
				let range = {
					min: 10,
					max: 100
				}
				try {
					const {
						gold_buy_weight,
						palladium_buy_weight,
						platinum_buy_weight,
						sliver_buy_weight
					} = this.buyBackWeightRange
					if (this.buybackType == 1) {
						range = {
							min: gold_buy_weight[0],
							max: gold_buy_weight[1]
						}
					}
					if (this.buybackType == 2) {
						range = {
							min: sliver_buy_weight[0],
							max: sliver_buy_weight[1]
						}
					}
					if (this.buybackType == 3) {
						range = {
							min: platinum_buy_weight[0],
							max: platinum_buy_weight[1]
						}
					}
					if (this.buybackType == 4) {
						range = {
							min: palladium_buy_weight[0],
							max: palladium_buy_weight[1]
						}
					}
				} catch (error) {
					// 
				}
				return range
			}
		},
		methods: {
			getUserInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data
					this.$store.commit('UPDATE_USERINFO', res.data)
				});
				this.$refs.addressWindow.getAddressList();
			},
			buy_back_weight_range() {
				buy_back_weight_range().then(res => {
					this.buyBackWeightRange = res.data
				})
			},
			buy_back_switch() {
				buy_back_switch().then(res => {
					this._buyBackConfig = res.data
				})
			},
			timeFormat(d, f) {
				return timeFormat(d, f)
			},
			homepage_goldHandle() {
				const uid = uni.getStorageSync('UID') || 0
				const buyMap = {
					黄金: "gold_buy",
					钯金: "palladium_buy",
					铂金: "platinum_buy",
					白银: "sliver_buy"
				}
				this._timer = setInterval(() => {
					this.buy_back_switch()
					homepage_gold({
						uid: uid
					}).then((res) => {
						const {
							data
						} = res
						data.forEach(item => {
							item.buyback_state = this._buyBackConfig[buyMap[item
								.metal_type_name_cn]]
						})
						this.goldList = [...data]
						this.updateTime = this.$util.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
					})
				}, 1000)
			},
			get_buyback_express_insurance() {
				this._insurance_timer = setInterval(() => {
					if (this.weightNum > 0) {
						get_buyback_express_insurance({
							weight: this.weightNum,
							type: this.buybackType
						}).then(({
							code,
							data
						}) => {
							this.confirmOrderDetail = {
								...this.confirmOrderDetail,
								...data
							}
						})
					}
				}, 1000)
			},
			clearTimer() {
				if (this._timer) {
					clearInterval(this._timer)
					this._timer = null;
				}
				if (this._insurance_timer) {
					clearInterval(this._insurance_timer)
					this._insurance_timer = null
				}
			},
			baoxianTips() {
				uni.showModal({
					// title: '提示',
					content: this.confirmOrderDetail.insure_percent_introduce,
					showCancel: false,
					confirmText: '我知道了',
					success: (res) => {}
				});
			},
			handleClick(item) {
				if (item.buyback_state == 0) return this.$util.Tips({
					title: this.$t(`该业务暂未开放，尽请期待！`)
				});
				this.buybackType = typeMap[item.metal_type_name_cn]
				totalPrice();
			},

			handleSubmit(item) {
				if (!this.$store.getters.isLogin) {
					toLogin()
					// uni.navigateTo({
					// 	url: '/pages/users/wechat_login/index',
					// });
					return
				}
				if (this.userInfo.real_name_status == 0) {
					uni.setStorageSync('pages_url', '/pages/home/index');
					uni.showModal({
						content: '尚未完成实名认证，请先完成实名，后进行下单',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/new_page/cert/enterpriseCert"
									// url: '/pages/users/authentication/index'
								})
				
							}
						}
					});
					return
				}
				if (this.userInfo.real_name_status == 2) {
					uni.setStorageSync('pages_url', '/pages/home/index');
					uni.showModal({
						content: '尚未完成电子签名，请先完成电子签名，后进行下单',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/users/authentication/agreement'
								})
				
							}
						}
					});
					return
				}
				if (this.userInfo.real_name_status == 3) {
					uni.setStorageSync('pages_url', '/pages/home/index');
					uni.showModal({
						content: '您的签署协议审核中，请耐心等待',
						showCancel: false,
						confirmText: '关闭',
						success: (res) => {
							if (res.confirm) {}
						}
					});
					return
				}
				if (this.userInfo.real_name_status == 4) {
					uni.setStorageSync('pages_url', '/pages/home/index');
					uni.navigateTo({
						url: "/pages/new_page/cert/enterpriseCert"
						// url: '/pages/users/authentication/index'
					})
					return
				}
				
				
				// if (this.userInfo.authenticate_type == 0) {
				// 	uni.setStorageSync('pages_url', '/pages/new_gold/repurchase/index');
				// 	uni.showModal({
				// 		content: '尚未完成实名认证，请先完成实名，后进行回购',
				// 		success: (res) => {
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/new_page/cert/enterpriseCert"
				// 				})

				// 			}
				// 		}
				// 	});
				// 	return
				// } else {
				// 	if (this.userInfo.is_real_pdf == 0) {
				// 		uni.setStorageSync('pages_url', '/pages/new_gold/repurchase/index');
				// 		uni.showModal({
				// 			content: '尚未完成电子签名，请先完成电子签名，后进行回购',
				// 			success: (res) => {
				// 				if (res.confirm) {
				// 					uni.navigateTo({
				// 						url: '/pages/users/authentication/agreement'
				// 					})

				// 				}
				// 			}
				// 		});
				// 		return
				// 	}
				// }
				if (!this.weightNum) return this.$util.Tips({
					title: this.$t(`请输入克重！`)
				});
				if (Number(this.weightNum) < Number(this.weightRange.min)) return this.$util.Tips({
					title: this.$t(`回购克重需要${this.weightRange.min}克起`)
				});
				if (Number(this.weightNum) > Number(this.weightRange.max)) return this.$util.Tips({
					title: this.$t(`限${ this.weightRange.max }克以下`)
				});

				if (!this.addressName) return this.$util.Tips({
					title: this.$t(`请选择寄件地址！`)
				});
				if (this.transactionType == 1) {
					this.stepIndex = 3;
					this.isSubmit = false
				}
				if (this.transactionType == 2) {
					if (!this.insurance) {
						this.isSubmit = true
					} else {
						this.isSubmit = false
					}

				}
				// this.changeTransactionType(1)

				this.confirmOrderDetail.type = typeArr[this.buybackType]
				this.$nextTick(() => {
					this.$refs.popup.open('bottom')
				})
			},

			stepChange(type) {
				this.confirmOrderDetail.weight = this.weightNum
			
				// 来料待结，未勾选快递保险，不用支付
				if (this.stepIndex == 2 && this.transactionType == 2 && !this.insurance) {
					this.confirmOrderDetail = {
						...this.confirmOrderDetail,
						type: typeArr[this.buybackType],
						order_type: '来料待结',
						insured: '0.00',
						weight: this.weightNum
					}
					uni.setStorage({
						key: 'buyback_confirmOrderDetail',
						data: this.confirmOrderDetail
					})
					this.isSubmit = true
					return
				}

				if (this.stepIndex == this.stepArr.length - 1 && type == 'down') {
					// 定价回收余额支付，余额不足拦截
					// if(this.transactionType == 1 && this.payIndex == 3 && Number(this.userInfo.now_money) < this.confirmOrderDetail.deposit) {
					if (this.payIndex == 3 && Number(this.userInfo.now_money) < this.confirmOrderDetail.deposit) {
						return this.$util.Tips({
							title: this.$t(`余额不足，请先充值`)
						});
					}

					// this.createOrder()
					this.isSubmit = true
					return
				}

				return
				if (type == 'up') {
					this.stepIndex--
					if (this._insurance_timer) {
						clearInterval(this._insurance_timer)
						this._insurance_timer = null
					}
				} else {
					if (this.stepIndex === 1) {
						if (!this.weightNum) {
							return this.$util.Tips({
								title: this.$t(`请输入克重`)
							});
						}
						if (Number(this.weightNum) < Number(this.weightRange.min) || Number(this.weightNum) > Number(this
								.weightRange.max)) {
							return this.$util.Tips({
								title: this.$t(`回购克重限${this.weightRange.min}~${this.weightRange.max}克`)
							});
						}
					}
					if (this.stepIndex === 2) {
						if (!this.addressName) {
							return this.$util.Tips({
								title: this.$t(`请选择寄件地址`)
							});
						}
						// if(!this.defaultData.startTime || !this.defaultData.endTime) {
						// 	return this.$util.Tips({
						// 		title: this.$t(`请选择寄件时间`)
						// 	});
						// }
						this.confirmOrderDetail.weight = this.weightNum

					}
					this.stepIndex++
				}


				switch (this.stepIndex) {
					case 0:
						this.headTxt = '您要和我们交易的方式？'
						break;
					case 1:
						this.headTxt = '您卖的商品克重是多少？'
						break;
					case 2:
						this.headTxt = '您寄件的地址请填一下！'
						this.get_buyback_express_insurance()
						break;
					case 3:
						this.headTxt = this.transactionType == 1 ? '选择支付定金的方式！' : '选择支付的方式！'
						break;

				}
			},

			async createOrder() {
				try {
					if (this._loading) return
					this._loading = true

					const {
						data
					} = await buyback_create_order({
						"weight": this.weightNum,
						// "start_date": '2024-11-19 20:00',
						// "end_date": '2024-11-19 21:00',
						"pay_type": this.payIndex,
						"address_id": this.addressId,
						"insured": this.insurance ? this.confirmOrderDetail.premium_price : 0,
						"order_type": this.transactionType,
						"type": this.buybackType
					})
					const order_info = data.order_info
					this._order_sn = order_info.order_sn
					this.confirmOrderDetail.add_time = order_info.add_time
					this.confirmOrderDetail.recycle_price = order_info.recycle_price
					uni.setStorage({
						key: 'buyback_confirmOrderDetail',
						data: this.confirmOrderDetail
					})
					if (this._insurance_timer) {
						clearInterval(this._insurance_timer)
						this._insurance_timer = null
					}

					// 来料待结，未勾选快递保险，不用支付
					if (this.transactionType == 2 && this.insurance == 0) {
						this.$util.Tips({
							title: '下单成功'
						})
						this.$refs.popup.close()
						this._loading = false
						setTimeout(() => {
							this.$util.JumpPath('/pages/new_gold/repurchase/orderSuccess')
						}, 1500)
						return
					}

					// this.isSubmit = true
					this._checkSubmit = true
					this._loading = false
				} catch (e) {
					this._checkSubmit = false
					this._loading = false
				}
			},

			insuranceChange(v) {
				this.insurance = v.detail.value
			},

			changeTransactionType(v) {
				this.transactionType = v
				this.confirmOrderDetail.order_type = v == 1 ? '现价回收' : '来料待结';
				return
				if (this.transactionType == 2) {
					this.stepArr[3] = '支付方式'
					// #ifdef MP-WEIXIN
					// #endif
					// #ifdef MP-ALIPAY
					// #endif
				} else {
					this.stepArr[3] = '付定方式'
				}
			},

			async submitBtn() {
				this._checkSubmit = false
				if (!this.isTerms) return this.$util.Tips({
					title: '阅读并同意《融通金金展店》'
				})

				// 来料待结，未勾选快递保险，不用支付
				if (this.transactionType == 2 && this.insurance == 0) {
					await this.createOrder()
					return
				}

				await this.createOrder()

				if (!this._checkSubmit) return

				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				if (this.payIndex === 1) {
					// 微信支付
					const {
						status,
						data
					} = await wechat_pay({
						paytype: 'weixin',
						uni: this._order_sn
					})
					if (status === 200) {
						uni.requestPayment({
							...data.result.jsConfig,
							success: (res) => {
								console.log('pay success', res);
								this.$util.Tips({
									title: '支付成功'
								})
								setTimeout(() => {
									this.$util.JumpPath('/pages/new_gold/repurchase/orderSuccess')
								}, 1500)
							},
							fail: (e) => {
								console.error('pay fail', e);
								buyback_cancel_order({
									order_sn: this._order_sn
								})
								this.$util.Tips({
									title: '支付失败'
								})
							},
							complete: () => {
								this.$refs.popup.close()
							}
						})
					}
				} else if (this.payIndex === 2) {
					// 支付宝支付
				} else if (this.payIndex === 3) {
					// 余额支付
					balance_pay({
						order_sn: this._order_sn
					}).then(({
						status,
						data
					}) => {
						if (status === 200) {
							this.$util.Tips({
								title: '支付成功'
							})
							setTimeout(() => {
								this.$util.JumpPath('/pages/new_gold/repurchase/orderSuccess')
							}, 1500)
						} else {
							this.$util.Tips({
								title: '支付失败'
							})
						}
						this.$refs.popup.close()
					})
				}
			},

			close() {
				this.$refs.popup.close()
				if (this._insurance_timer) {
					clearInterval(this._insurance_timer)
					this._insurance_timer = null
				}
				setTimeout(() => {
					this.stepIndex = 0
				}, 300)
			},

			timeChange(val) {
				// console.log(val); 
				this.defaultData.startTime = val[0]
				this.defaultData.endTime = val[1]
			},
			onAddress: function() {
				let that = this;
				this.$refs.addressWindow.getAddressList();
				that.textareaStatus = false;
				that.address.address = true;
				this.pagesUrl = '/pages/users/user_address/index?news=' + this.news +
					'&pinkId=' +
					this.pinkId +
					'&couponId=' +
					this.couponId;
			},

			changeTextareaStatus: function() {
				for (let i = 0, len = this.coupon.list.length; i < len; i++) {
					this.coupon.list[i].use_title = '';
					this.coupon.list[i].is_use = 0;
				}
				this.textareaStatus = true;
				this.status = 0;
				this.$set(this.coupon, 'list', this.coupon.list);
			},
			/**
			 * 选择地址后改变事件
			 * @param object e
			 */
			OnChangeAddress: function(e) {
				this.textareaStatus = true;
				this.addressId = e;
				this.address.address = false;
				let addReecom = uni.getStorageSync('addressObj');
				this.address_phone = addReecom['phone'],// 手机号
				this.address_nickname = addReecom['real_name'],// 姓名
				this.addressName = uni.getStorageSync('addressName')
			},
			OnDefaultAddress(e) {
				if (this.addressId) return
				this.textareaStatus = true;
				this.addressId = e;
				let addReecom = uni.getStorageSync('addressObj');
				this.address_phone = addReecom['phone'],// 手机号
				this.address_nickname = addReecom['real_name'],// 姓名
				this.addressName = uni.getStorageSync('addressName')
			},
			// 关闭地址弹窗；
			changeClose: function() {
				this.$set(this.address, 'address', false);
			},
			onHaveAddressList() {
				this.haveAddressList = true
			},
			toBank() {
				uni.navigateBack({
					delta: 1
				})
			},
			buybackGuide(id) {
				this.$util.JumpPath('/pages/new_page/richText/index?id=' + id)
			},

			getAdv() {
				const show = uni.getStorageSync('SHOW_ADPOPUP')
				if (show) {
					uni.removeStorageSync('SHOW_ADPOPUP');
					return
				}
				const show1 = uni.getStorageSync('SHOW_HUIGOU_ADPOPUP')
				if (show1) {
					return
				}
				uni.setStorageSync('SHOW_HUIGOU_ADPOPUP', 1)

				getOpenAdv().then(res => {
					const data = res.data
					if (data.value.length) {
						this.advData = data
						this.timerDown()
						this.openGuidePop()
					}

				}).catch(err => {})
			},

			openGuidePop() {
				this.$refs.timeGuidePopup.open()
			},
			closeGuidePop() {
				this.$refs.timeGuidePopup.close()
			},

			article_details() {
				article_details({
					id: 9
				}).then((res) => {

					const data = res.data
					this.richData = this.setRichData(data.content)
				})
			},
			// 解决富文本图片没有设置适应宽度的问题
			setRichData(data) {
				return data.replace(/<img/g, "<img style='width:100%;height:auto;'")
			},

			setOpenShare: function() {
				let that = this;
				getShare().then((res) => {
					let data = res.data;
					this.shareInfo = data;
				});
			},

			// timerDown() {
			// 	this.times = this.advData.time
			// 	let t = this.advData.time || 5
			// 	this.timecount = setInterval(() => {
			// 		t--
			// 		this.times = t
			// 		if (t <= 0) {
			// 			clearInterval(this.timecount)
			// 			this.closeGuidePop()
			// 		}
			// 	}, 1000)
			// },
			// jump(url) {
			// 	if (url) {
			// 		this.closeGuidePop()
			// 		this.$util.JumpPath(url);
			// 	}
			// },
		},
		onShareAppMessage() {
			
			return {
				title: this.shareInfo.title,
				path: "/pages/home/index?spid=" + this.$store.state.app.uid || 0,
				imageUrl: this.shareInfo.img,
			};
		},
		onShareTimeline() {
			return {
				title: this.shareInfo.title,
				query: {
					spid: this.$store.state.app.uid || 0
				},
				imageUrl: this.shareInfo.img,
			};
		},
	}
</script>

<style lang="scss" scoped>
	.repurchase {
		width: 750rpx;
		// min-height: 100vh;
		background:#F8F8FA;
		overflow: hidden;
		.back-bg {
			width: 750rpx;
			height: 400rpx;
			font-size: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.homeIcon {
			position: absolute;
			right: 0;
			top: 460rpx;
			width: 176rpx;
			height: 68rpx;
			font-size: 0;
			z-index: 999;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			padding-bottom: 30rpx;
			position: relative;
			z-index: 16;
			overflow: hidden;
			width: 700rpx;
			margin: 30rpx auto 0;
			border-radius: 20rpx;
			overflow: hidden;
			background: #fff;
			.tabel-box {
				
				margin: 0 auto;
				width: 702rpx;

				// .tabel-head {
				// 	width: 702rpx;
				// 	height: 98rpx;
				// 	position: relative;

				// 	.tabel-head-list {
				// 		position: absolute;
				// 		top: 0;
				// 		left: 0;
				// 		z-index: 17;
				// 		width: 702rpx;
				// 		height: 98rpx;
				// 		display: flex;
				// 		align-items: center;
				// 		justify-content: space-between;

				// 		.tabel-head-list-text {
				// 			width: 25%;
				// 			font-size: 30rpx;
				// 			font-weight: 400;
				// 			color: rgba(125, 85, 0, 1);
				// 			text-align: center;
				// 		}

				// 		.tabel-head-list-text-active {
				// 			color: rgba(46, 46, 46, 1);
				// 		}
				// 	}

				// 	.tabel-head-bg {
				// 		position: absolute;
				// 		top: 0;
				// 		left: 0;
				// 		width: 702rpx;
				// 		height: 98rpx;
				// 		font-size: 0;

				// 		image {
				// 			width: 100%;
				// 			height: 100%;
				// 		}
				// 	}
				// }
				.title_box {
					$border-w: 15rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #7D5A37;
					position: relative;
					width: 377.5rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					margin: 0 auto;
					background: linear-gradient(90deg, #F4EACC 0%, #F6EFDE 52.2%, #EDDFBD 100%);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
				
					// transform:perspective(30rpx) rotateX(0deg);
					// transform-origin: center top; 
					.triangle1 {
						position: absolute;
						left: -30rpx;
						top: 0;
						border: $border-w solid #f4eacd;
						border-left: $border-w solid transparent;
						border-bottom: $border-w solid transparent;
					}
				
					&:before,
					&::after {
						position: absolute;
						content: "";
						top: 0;
						width: 0;
						height: 0;
						border-style: solid;
				
					}
				
					&::before {
						border-width: 0px 20rpx 48rpx 0;
						border-color: transparent rgb(244, 234, 205) transparent transparent;
						left: -18rpx;
					}
				
					&::after {
						border-width: 0px 0 48rpx 20rpx;
						border-color: transparent transparent transparent rgb(238, 225, 192);
						right: -18rpx;
					}
				}
				.tabel-info {
					position: relative;
					z-index: 20;
					width: 702rpx;
					// height: 440rpx;
					border-radius: 0 0 8rpx 8rpx;
					background: rgba(255, 255, 255, 1);
					padding-top: 30rpx;

					.tabel-info-money {
						width: 100%;
						text-align: center;
						font-size: 60rpx;
						font-weight: bold;
						color: red;

						text {
							font-size: 24rpx;
							font-weight: 400;
						}
					}

					.tabel-info-tips {
						margin: 16rpx auto 0;
						width: 630rpx;
						height: 48rpx;
						border-radius: 10rpx;
						background: rgba(251, 244, 241, 1);
						border: 1px solid rgba(237, 211, 193, 1);
						font-size: 24rpx;
						font-weight: 400;
						line-height: 45rpx;
						color: rgba(184, 136, 103, 1);
						text-align: center;
					}
					.weight_tip{
						font-size: 24rpx;
						color: #D43030;
						text-align: center;
						margin-bottom: 30rpx;
					}
					// 交易克重
					.table-form-weight{
						    display: flex;
						    align-items: center;
						    justify-content: space-between;
						    margin: 25rpx 30rpx;
						    padding: 28rpx 10rpx;
						    border-top: 0px solid #f4f0e7;
						    position: relative;
						    background: #F5F6F7;
						    border-radius: 16rpx;
						
						.form-info-left{
							font-size: 30rpx;
							font-weight: bold;
							color: #403f3f;
							margin-left: 35rpx;
						}
						.form-info-right-input {
							width: 240rpx;
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(115, 114, 114, 1);
							text-align: right;
							margin-right: 32rpx;
						}
					}
					// 交易方式
					.form-type-box {
						display: flex;
						align-items: center;
					
							.form-type-info {
								margin-left: 25rpx;
								display: flex;
								align-items: center;
						
								.form-type-text {
									position: relative;
									margin-left: 12rpx;
									font-size: 30rpx;
									font-weight: 400;
									color: #131212;
									border-radius: 16rpx;
									background: #F5F6F7;
									width: 299rpx;
									height: 113rpx;
									text-align: center;
									line-height: 113rpx;
									
								}
						
								.form-type-text-a {
									position: relative;
									color: #85624B;
									border: 2rpx solid #E6D399;
									background: #F4F0E7;
									
									&::before {
										position: absolute;
										left: 0;
										top: 0;
										content: "√";
										width: 44rpx;
										height: 38rpx;
										line-height: 38rpx;
										text-align: center;
										color: #000;
										font-size: 24rpx;
										background: #E6D399;
										border-radius: 16rpx 0rpx 16rpx 0rpx;
									}
									
								}
							}
						}
					
				
				}
				
				
			}


			.sale-price {
				position: relative;
				z-index: 9;
				margin: 0 auto;
				width: 712rpx;
				border-radius: 12rpx 12rpx 0px 0px;
				background: rgba(255, 255, 255, 1);
				padding: 70rpx 0 30rpx;

				// overflow: hidden;
				.sale-price-title {
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;

					.sale-price-title_left {
						width: 172rpx;
						height: 56rpx;
						border-radius: 12rpx 0 0 0;
						background: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						font-weight: 400;
						line-height: 56rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}

					.sale-price-title_right {
						width: 22rpx;
						height: 56rpx;
						border-radius: 0 0 12rpx 0;
						background: rgba(236, 124, 42, 1);
					}
				}

				.sale-price-dot {
					position: absolute;
					bottom: -15rpx;
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
					background: #FF8F40;
				}

				.sale-price-dot-left {
					left: -14rpx;
				}

				.sale-price-dot-right {
					right: -14rpx;
				}

				.sale-price-name {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(92, 84, 84, 1);
					text-align: center;
				}

				.sale-price-num {
					margin-top: 20rpx;
					font-size: 60rpx;
					font-weight: bold;
					color: rgba(6, 159, 77, 1);
					text-align: center;
				}

				.sale-price-btn {
					margin: 40rpx auto 0;
					width: 460rpx;
					height: 88rpx;
					border-radius: 8rpx;
					background: linear-gradient(90deg, rgba(242, 226, 174, 1) 0%, rgba(249, 244, 229, 1) 47.92%, rgba(237, 222, 177, 1) 100%);
					font-size: 28rpx;
					font-weight: bold;
					line-height: 88rpx;
					color: rgba(209, 153, 78, 1);
					text-align: center;
				}
			}

			.form-box {
				width: 701rpx;
				margin: 0 auto;
				border-radius: 0px 0px 12rpx 12rpx;
				background: rgba(255, 255, 255, 1);
				
				
				.form-info-pd {
					padding: 28rpx 10rpx 42rpx !important;
				}

				.form-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 30rpx;
					padding: 28rpx 10rpx;
					
					position: relative;
					&:not(:first-child){
						border-top: 2px solid rgba(244, 240, 231, 1);
					}
					
					.form-info-address-text{
						padding:12px 30rpx;
						border-radius:8rpx;
						margin-top:10rpx;
						background-image: url('../static/map_bg.png');
						background-size: contain;
						border-radius: 12rpx;
						overflow: hidden;
						background-repeat: no-repeat;
						.form-info-address-text-title{
							font-size: 29rpx;
							font-weight: bold;
							height: 47rpx;
							line-height: 47rpx;
						}
						.form-info-address-text-info{
							font-size: 22rpx;
							height: 47rpx;
							line-height: 47rpx;
						}
					}
					.form-info-left {
						font-size: 30rpx;
						font-weight: bold;
						color: rgba(64, 63, 63, 1);
					}
					
					.form-info-right {
						position: relative;
						display: flex;
						align-items: center;
						position: relative;
						.tip_box{
							position: absolute;
							font-size: 24rpx;
							color: #D43030;
							bottom: -40rpx;
							right: 0;
						}
						.form-type-box {
							display: flex;
							align-items: center;

							.form-type-info {
								margin-left: 40rpx;
								display: flex;
								align-items: center;

								.form-type-icon {
									font-size: 0;
									width: 40rpx;
									height: 40rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.form-type-text {
									margin-left: 12rpx;
									font-size: 30rpx;
									font-weight: 400;
									color: rgba(115, 114, 114, 1);
								}

								.form-type-text-a {
									color: rgba(125, 85, 0, 1);
								}
							}
						}

						.form-info-right-input {
							width: 240rpx;
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(115, 114, 114, 1);
							text-align: right;
							margin-right: 6rpx;
						}

						.form-info-right-text {
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(115, 114, 114, 1);
						}

						.form-info-right-address {
							width: 418rpx;
							text-align: right;
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(115, 114, 114, 1);
						}

						.form-info-right-btn {
							position: absolute;
							right: -40rpx;
							top: 50%;
							transform: translateY(-50%);
						}

						.form-info-right-money {
							font-size: 30rpx;
							font-weight: bold;
							color: rgba(212, 48, 48, 1);
						}
					}

					.form-info-tips {
						position: absolute;
						right: 0;
						bottom: 10rpx;
						font-size: 24rpx;
						color: rgba(212, 48, 48, 1);
						text-align: center;
					}
				}

				.form-info-a {
					border: none !important;
				}
			}

			.tips {
				margin: 40rpx 40rpx 0;

				.tips-title {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}

				.tips-text {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 42rpx;
					color: #272424;
				}
			}
		}

		.base-box {
			position: fixed;
			// bottom: calc(120rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			// bottom: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			bottom: 0;
			z-index: 60;
			width: 750rpx;
			height: 110rpx;
			background: #fff;
			border-top: 1px solid rgba(237, 237, 237, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			.base-title-price{
				font-weight: bold;
				    width: 60%;
				    font-size: 34rpx;
					height: 75rpx;
					line-height: 65rpx;
			}
			.base-btn {
				 width: 235rpx;
				 height: 75rpx;
				 border-radius: 55rpx;
				 background: var(--view-theme);
				 font-size: 28rpx;
				 font-weight: bold;
				 line-height: 75rpx;
				 color: #fff;
				 text-align: center;
			
			}
		}
	}











	::v-deep.vue-ref {
		position: relative !important;
		z-index: 999999 !important;
		padding: 0 !important;
	}

	.popContent {

		width: 750rpx;
		// height: 1140rpx;
		// height: calc(1140rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		// height: calc(1140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		overflow: hidden;
		border-radius: 40rpx 40rpx 0 0;
		background: #F5F6F7;
		overflow: hidden;

		.closeBox {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			color: #FFF;
			text-align: center;
			font-size: 40rpx;
			font-weight: 700;
			line-height: 40rpx;
			background: #a6a6a6;

		}
	}

	.popTop {
		width: 100%;
		height: 257rpx;
		background: rgba(247, 233, 197, 0.4);
		overflow: hidden;

		.title {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: rgba(48, 48, 48, 1);
			margin: 48rpx auto;
		}

		.stepList {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.stepItem {
			position: relative;
			text-align: center;
		}

		.active {
			.stepIdx {
				color: #FFF !important;
				border-color: #BD7E21 !important;
				background: #BD7E21 !important;
			}
		}

		.stepIdx {
			width: 42rpx;
			height: 42rpx;
			font-size: 28rpx;
			line-height: 42rpx;
			border-radius: 50%;
			text-align: center;
			color: rgba(166, 166, 166, 1);
			border: 2rpx solid #A6A6A6;
			margin: 0 auto 12rpx;
		}

		.stepIdxActive {
			color: #fff;
			background: #C3A769;
			border-color: #C3A769;
		}

		.stepName {
			font-size: 28rpx;
			text-align: center;
			color: rgba(166, 166, 166, 1);
		}

		.stepNameActive {
			color: #C3A769;
		}

		.arrowBox {
			position: relative;
			position: absolute;
			right: -80rpx;
			top: 22rpx;
			width: 80rpx;
			height: 2rpx;
			background: #A6A6A6;

			.arrowBg {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				left: 55%;
				top: 49.5%;
				transform: translate(-50%, -50%);
			}

			.triangle {
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 8rpx 0 8rpx 16rpx;
				border-color: transparent transparent transparent #A6A6A6;

			}
		}

		.arrowActive {
			background: #c3a769 !important;

			.arrowBg {
				background: #f6f1e3 !important;

				.triangle {
					border-color: transparent transparent transparent #c3a769 !important;
				}
			}
		}
	}

	.headTips {
		width: 352rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(43, 45, 44, 1);
		text-align: center;
		margin: 38rpx auto;

	}

	.radioTypeBox {
		position: relative;
		width: 665rpx;
		// height: 200rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.6);
		border: 1rpx solid rgba(237, 222, 180, 1);
		margin: 0 auto 24rpx;
		padding: 30rpx 36rpx;

		.radioTitle {
			line-height: 58rpx;
			font-size: 40rpx;
			font-weight: 700;
			color: rgba(87, 87, 87, 1);
			text-align: left;
		}

		.radioTtxt {
			// line-height: 70rpx;
			width: 500rpx;
			font-size: 24rpx;
			text-align: left;
			color: rgba(87, 87, 87, 1);
		}

		.radioBox {
			position: absolute;
			right: 38rpx;
			top: 67rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			text-align: center;
			border: 3rpx solid rgba(171, 138, 68, 1);
		}
	}

	.radioTypeActive {
		background: #F7E9C5 !important;

		.radioTitle {
			color: #AB8A44 !important;
		}

		.radioTtxt {
			color: #C3A769 !important;
		}

		.radioBox {
			color: #FFF;
			border: none !important;
			background: #AB8A44 !important;
		}
	}

	.processItem {
		width: 664rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 0 36rpx;
		min-height: 127rpx;
		margin: 0 auto;

		.inputBox {
			width: 590rpx;
			height: 95rpx;
			text-align: center;
			font-size: 32rpx;
			line-height: 95rpx;
			border-radius: 12rpx;
			background: #F5F6F7;
			color: #383838;
		}

		.addressTxt {
			display: inline-block;
			width: 378rpx;
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(115, 114, 114, 1);
			text-align: right;
		}

		.name {
			position: relative;

			.wenhao-icon {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: -4rpx;
				right: -30rpx;
				z-index: 2;
			}
		}

	}

	.dangerTxt {
		font-size: 24rpx;
		color: rgba(212, 48, 48, 1);
		text-align: center;
		margin-top: 16rpx;
		margin-bottom: -16rpx;
	}

	.dangerRed {
		font-size: 24rpx;
		color: rgba(212, 48, 48, 1);
		text-align: center;
		margin: 0 auto 26rpx;
	}

	.tagTxt {
		font-size: 28rpx;
		line-height: 40.54rpx;
		color: rgba(128, 128, 128, 1);
		text-align: center;
	}

	.moneyNum {
		font-size: 60rpx;
		font-weight: 700;
		line-height: 86.88rpx;
		color: rgba(212, 48, 48, 1);
		text-align: center;
	}

	.payImg {
		width: 44rpx;
		height: 44rpx;
		margin-right: 16rpx;
	}

	.payInfo {
		margin-left: 8rpx;

		.typeName {
			font-size: 28rpx;
			font-weight: 550;
			text-align: left;
			color: #000;
		}

		.payTxt {
			font-size: 24rpx;
			text-align: left;
			color: rgba(43, 45, 44, 1);
		}
	}

	.payRadioBox {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		text-align: center;
		border: 3rpx solid #ccc;
	}

	.payRadioActive {
		font-weight: 700;
		color: #000;
		background: #E8CBA1;
	}

	.bdrder_bm {
		padding-bottom: 24rpx;
		margin-bottom: 36rpx;
		border-bottom: 2rpx solid rgba(204, 204, 204, 0.2);
	}

	.goldTxt {
		font-size: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(153, 114, 60, 1);
		text-align: center;
		margin: -16rpx auto 16rpx;
		// margin: 0 auto;
	}

	.goldTxtFw {
		font-size: 40rpx;
		font-weight: 700;
	}

	.confirmMain {
		width: 700rpx;
		height: 587rpx;
		border-radius: 12rpx;
		background: #fff;
		padding: 0 35rpx 40rpx;
		margin: 0 auto;
		overflow: hidden;

		.confirmMainHead {
			margin-top: 28rpx;
		}

		.fw_550 {
			font-size: 30rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(48, 48, 48, 1);
			text-align: left;
		}

		.ml_28 {
			margin-left: 28rpx;
		}

		.redTxt {
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			color: rgba(212, 48, 48, 1);
			text-align: right;
		}

		.confirmGrey {
			font-size: 28rpx;
			letter-spacing: 0rpx;
			line-height: 34.75rpx;
			color: rgba(122, 122, 122, 1);
			text-align: center;
		}

		.confirmItem {
			height: 58rpx;
			line-height: 58rpx;
		}
	}

	.floorBox {
		// position: absolute;
		// left: 0;
		// bottom: 120rpx;
		// margin-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		// margin-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		width: 750rpx;
		min-height: 161rpx;
		background: rgba(255, 255, 255, 1);
		border-top: 1rpx solid rgba(237, 237, 237, 1);
		padding: 0 24rpx 24rpx;
		box-sizing: border-box;
		margin-top: 52rpx;

		.downBtn {
			flex: 1;
			height: 100rpx;
			opacity: 1;
			border-radius: 55rpx;
			font-size: 30rpx;
			font-weight: 700;
			line-height: 100rpx;
			color: #fff;
			text-align: center;
			background: #E6D399;

		}

		.upBtn {
			width: 200rpx;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			color: rgba(64, 63, 63, 1);
		}

		.fl_radio {
			width: 39rpx;
			height: 39rpx;
			line-height: 39rpx;
			border-radius: 50%;
			border: 2rpx solid rgba(236, 192, 92, 1);
			margin-right: 26rpx;
			text-align: center;
		}

		.fl_radioActive {
			width: 39rpx;
			height: 39rpx;
			color: #fff;
			border-radius: 50%;
			background: rgba(236, 192, 92, 1);
		}

		.termsTxt {
			margin: 27rpx 0;
			font-size: 26rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 52rpx;
			color: rgba(112, 112, 112, 1);
		}

		.termsRed {
			color: rgba(212, 48, 48, 1);
		}
	}
</style>